<script setup>


import {useRoute, useRouter} from "vue-router"; // 获取参数 用 useRoute


const back = useRouter();

const route = useRoute(); // 获取参数 用 useRoute
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

import MyAxios from "../plugins/myAxios.ts";
import myAxios from "../plugins/myAxios.ts";
import {showToast} from "vant";


const post = ref(
    {
      id: 0,
      title: '',
      content: '',
      thumbNum: 0,
      favourNum: 0,
      commentNum: 0,
      userId: 0,
      createTime: '',
      updateTime: '',
      hasFavour: 0,
      hasThumb: 0,
      commentVOList: []
    }
);

// const commentVO = ref({
//    commentUserId: 0,
//    commentContent: '',
//    createTime: '',
//    userAvatar: '',
//   userNickName: ''
// })
const commentVOList = ref([{
  commentUserId: 0,
  commentContent: '',
  createTime: '',
  userAvatar: '',
  userNickName: '',
}])

const user = ref({
  authorId: 0,
  authorName: '',
  authorAvatar: '',
  authorEmail: '',
  authorPhone: '',
  authorProfile: '',
  authorLevel: 0,
  gender: '',
})

// 使用 ref 创建响应式变量


const editorRef = MyAxios.get('/post/get', {
  params: {
    postId: route.query.id
  }
})
    .then(res => {

      if (res.data.data.hasFavour > 0) {
        favorIcon.value = "star"
      }
      if (res.data.data.hasThumb > 0) {
        thumbIcon.value = "like"
      }

      console.log(res.data.data);
      post.value = res.data.data;
      commentVOList.value = post.value.commentVOList;

      console.log(commentVOList.value);
      console.log(post.value);
      valueHtml.value = "<h1>" + res.data.data.title + "</h1>" + "<p>" + res.data.data.content + "</p>";
      return shallowRef()
    })
    .catch(err => {

      console.log(err);
    });


// // 编辑器实例，必须用 shallowRef
// const editorRef = shallowRef()


// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// // 模拟 ajax 异步获取内容
// onMounted(() => {
//   setTimeout(() => {
//     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
//   }, 1500)
// })


// 工具栏配置
const toolbarConfig = {}

const favorIcon = ref("star-o")
const thumbIcon = ref("like-o")

const favorNum = ref(0)
const thumbNum = ref(0)
const commentNum = ref(0)

onMounted(() => {
  myAxios.get("/user/post/count", {
    params: {
      postId: route.query.id
    }
  })
      .then(res => {
        console.log(res.data.data);
        favorNum.value = res.data.data.favourNum;
        thumbNum.value = res.data.data.thumbNum;
        commentNum.value = res.data.data.commentNum;
      })
      .catch(err => {
        console.log(err);
      });
})



const submitComment = () => {
  console.log(post.value.id);
  if (commentContent.value.trim() === "") {
    showToast("评论内容不能为空");
    return;
  }

  console.log(commentContent.value);
  MyAxios.get("/user/post/comment", {
    params: {
      postId: post.value.id,
      content: commentContent.value
    }
  })
      .then(res => {
        commentNum.value++;
        console.log(res.data.data);
        commentContent.value = "";
        showToast("评论成功");
        //放在第一个
        commentVOList.value.unshift(res.data.data);
        console.log(commentVOList.value);
      })
      .catch(err => {
        console.log(err);
      })
}


const editorConfig = {placeholder: '请输入内容...'}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}


const handleFavour = () => {
  console.log(post.value.id);
  myAxios.get("/favour/post", {
    params: {
      postId: post.value.id
    }
  })

      .then(res => {
        console.log(res);
        if (res.data.data > 0) {
          favorIcon.value = "star"
          showToast("收藏成功");
          favorNum.value++;

        } else {
          showToast("取消收藏成功");
          favorNum.value--;
          favorIcon.value = "star-o";
        }
        console.log(post.value.favourNum);
      })
      .catch(err => {
        console.log(err);
      });
}
const handleThumb = () => {
  console.log(post.value.id);
  myAxios.get("/thumb/post", {
    params: {
      postId: post.value.id
    }
  })
      .then(res => {
        console.log(res);
        if (res.data.data > 0) {
          thumbIcon.value = "like"
          showToast("点赞成功");
          thumbNum.value++;

        } else {
          showToast("取消点赞成功");
          thumbNum.value--;
          thumbIcon.value = "like-o";
        }
        console.log(post.value.thumbNum);
      })
      .catch(err => {
        console.log(err);
      })
}

const authorMessage = () => {
  console.log(post.value.userId);
  myAxios.get("/user/author", {
    params: {
      authorId: post.value.userId
    }
  })
       .then(res => {
          show.value = false;
          console.log(res.data.data);
          user.value = res.data.data;
          console.log(user.value);
          show1.value = true;
        })
       .catch(err => {
         console.log(err);
       })
}




const handleComment = () => {
  show.value = true;
}

const show = ref(false);
const show1 = ref(false);


const isLoading = ref(false);

const finished = ref(false);

const commentContent = ref("");

</script>


<template>
  <van-nav-bar class="nav-bar">


  </van-nav-bar>
  <img src="../assets/最终返回键.png" class="back-btn" alt="返回" @click="$router.back"/>

  <div style="border: 1px solid #ccc" class="container">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"

    />
    <Editor
        style="height: 85%; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"

        @onCreated="handleCreated"
    />
    <div>
      <img src="../assets/云雾.png" style="top: -20%">
      <p style="font-size: 16px; font-weight: bold; margin-top: 10px; margin-left: 10px;
                position:absolute; top: 100%;
">
        更新时间：{{post.updateTime}}</p>
    </div>
  </div>



  <div class="operation-bar">


    <van-image
        round
        width="2.8rem"
        height="2.8rem"
        fit="cover"
        position="center"
        src="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/canva-%E8%93%9D%E7%99%BD%E8%89%B2%E5%8D%A1%E9%80%9Aq%E7%89%88%E5%8F%A4%E9%A3%8E%E4%BB%99%E4%BE%A0%E4%B8%AD%E5%9B%BD%E9%A3%8E%E4%BA%BA%E7%89%A9%E6%83%85%E4%BE%A3%E7%94%B7%E7%94%9F%E9%9C%87%E6%83%8A%E8%A3%82%E5%BC%80%E5%A4%B4%E5%83%8F%E6%8F%92%E7%94%BB%E8%B4%B4%E7%BA%B8%E6%89%8B%E7%BB%98%E4%B8%83%E5%A4%95%E4%B8%AA%E4%BA%BA%E5%88%86%E4%BA%AB%E4%B8%AD%E6%96%87%E5%BE%AE%E4%BF%A1%E5%A4%B4%E5%83%8F-6IkU2HlPE-I.jpg"
        class="avatar"
        @click="authorMessage"
    />


    <van-icon id="favour-icon" :name="favorIcon" class="favour-icon" size="40" @click="handleFavour"/>
    <van-icon id="thumb-icon" :name="thumbIcon" class="thumb-icon" size="40" @click="handleThumb"/>
    <van-icon id="comment-icon" name=more class="comment-icon" size="40" @click="handleComment"/>
    <p class="favour-num">{{ favorNum }}</p>
    <p class="thumb-num">{{ thumbNum }}</p>
    <p class="comment-num">{{ commentNum }}</p>
  </div>

    <van-overlay :show="show1">
      <div class="author-message-wrapper">
        <img src="../assets/最终叉号键.png" class="close-btn" style="width: 15%; height: 10%" @click="show1 = false"/>

        <div class="author-message-block">
          <img :src="user.authorAvatar" alt="用户头像" style="width: 5rem ;height:5rem;"/>
          <div class="author-message-title">
            <p class="author-name">昵称：{{ user.authorName }}</p>
            <p class="author-level">等级：Lv.{{ user.authorLevel }}</p>
            <p class="author-gender">性别：{{ user.gender }}</p>
          </div>
          <div class="author-message-content">
            <p class="author-profile">简介：{{ user.authorProfile }}</p>
            <p class="author-email">邮箱：{{ user.authorEmail }}</p>
            <p class="author-phone">电话：{{ user.authorPhone }}</p>
          </div>
        </div>
      </div>
    </van-overlay>



    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="block">


          <div class="show-content">

            <img src="../assets/最终叉号键.png" class="close-btn" @click="show = false"/>
            <p style="line-height: 30px; font-size: 24px; font-weight: bold; margin-top: 10px; margin-left: 10px; font-family: STXingkai,serif  ;">评论区</p>

            <div class="comment-container">
              <van-list>
                <van-card
                    v-for="(item, index) in commentVOList"
                    :desc="item.commentContent"
                    :title="item.userNickName"

                    class="comment-card"
                >
                  <template #thumb>
                    <img :src="item.userAvatar" @click="authorMessage" alt="用户头像" style="width: 5rem ;height:5rem;"/>
                  </template>

                  <template #footer>
                    <van-button size="mini">{{ item.createTime.substring(5, 10)+'-'+item.createTime.substring(11, 16) }}</van-button>
                  </template>
                </van-card>

              </van-list>
            </div>

            <div class="comment-input">
              <van-field placeholder="请输入评论内容" type="textarea" v-model="commentContent"  style="width: 60%; height:100%;" />
              <img src="../assets/发送.png" class="send-btn">
              <p class="send-text" @click="submitComment">发送</p>
            </div>

          </div>

        </div>
      </div>
    </van-overlay>

</template>

<style scoped>

.author-message-wrapper{
  top: 0;
  left: -20%;
  width: 100%;
  height: 100%;

  background-image: url("../assets/作者展示.png");
}
.author-message-block {
  position: absolute;
  top: 20%;
  left: 20%;

  width: 60%;
}
.close-btn{
  width: 10%;
  height: 7%;
  position: absolute;
  left: 80%;
  z-index: 1;
}
.comment-input {
  display: flex;
  width: 120%;

  height: 30%;
}
.send-btn {

  left: 65%;
  top: 70%;
  width: 23%;
  height: 80%;
}
.send-text {

  position: absolute;
  left: 69.5%;
  top: 62.75%;
  font-size: 20px;
  font-family: STXingkai,serif  ;
}

.comment-container {
  height: 100%; /* 设定容器高度，超出部分会出现滚动条 */
  overflow: hidden; /* 隐藏滚动条 */
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  height: 80%;
  background-color: #fff;
}

.show-content {
  width: 95%;
  height: 80%;
  right: 2.5%;
  display: flex;
  flex-direction: column;
}


.comment-card {
  margin-top: 5px;
  margin-bottom:5px;
  margin-left: 10px;
  width: 100%;


}



.favour-num {
  position: fixed;
  left: 90%;
  top: 83%;
}

.thumb-num {
  position: fixed;
  left: 90%;
  top: 65%;
}

.comment-num {
  position: fixed;
  left: 90%;
  top: 74%;

}

.favour-icon {
  left: 86%;
  top: 80%;
  margin-right: 10px;
  color: rgb(253, 147, 227);
  position: fixed;
}


.thumb-icon {
  left: 86%;
  top: 62%;
  margin-right: 10px;
  color: #fcc468;
  position: fixed;
}

.comment-icon {
  left: 86%;
  top: 71%;
  margin-right: 10px;
  color: #8da0d7;
  position: fixed;
}

.avatar {
  left: 86%;
  top: 51%;
  margin-right: 10px;
  color: #ff002f;
  position: fixed;
}

.container {
  position: relative;


  overflow-y: auto;
  width: 100%;
}

.back-btn {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 1;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}

</style>
